<template>
  <div class="container"> <!--第一层一定要用包裹不要有兄弟节点-->
    <!--<input placeholder="输入验证码" type="text" v-model="phone" autocomplete="off"/><br>-->
    <!--<input placeholder="输入密码" type="password" v-model="password" autocomplete="off"/><br>-->
    <!--<input type="submit" value="登录" @click="clickLogin"/>-->

    <div class="header-bar-progress">
      <div class="progress-box" style="width: 33.33%" :class="{anim:anim}"></div>
    </div>

    <div class="content-box">
      <div class="login-content-box pb-5">
        <div class="clearfix func-section-wrap" :class="{anim:anim}">
          <div class="func-section sec1">
            <div class="login-big-title">请输入手机号</div>
            <div class="clearfix mt-8-6 login-border-box">
              <input type="tel" placeholder="请输入手机号" v-model="phone" @input="onPhoneInput" maxlength="13"
                     autocomplete="off" id="mobile" class="left login-input-text" autofocus="autofocus">
              <span class="right reset-btn icon-reset" v-show="phone != ''" @click="phone=''"></span>
            </div>
          </div>
          <div class="func-section sec2">
            <div class="login-big-title">请输入登录密码</div>
            <div class="clearfix mt-8-6 login-border-box">
              <input :type="eye_type" placeholder="请输入登录密码" v-model="password" @input="onPasswordInput"
                     class="left login-input-text password-input" maxlength="18">
              <span class="right password-show icon-eyes" @click="changePasswordType "></span>
              <span class="right reset-btn icon-reset" v-show="password != ''" @click="password=''"></span>
            </div>
            <div class="clearfix mt-2">
              <!-- 传参方式 第1种 -->
              <a @click="forgetPassword" class="right btn-link font-size-30 ">忘记密码?</a>
              <!-- 传参方式 第2种 -->
              <!-- <a href = "javascript:void(0);" onclick ="findPWD()" class="right btn-link font-size-30">忘记密码?</a> -->
            </div>
          </div>
        </div>

        <div class="clearfix pt-1 mr-5">
          <button type="button" @click="next();" id="login-smt" class="login-submit right"
                  v-bind:disabled="!show_next"></button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {checkPhone} from '@/utils/validate.js'
  export default {
    data(){
      return {
        phone: '',
        password: '',
        show_next: false,
        status: 0,
        eye_type: 'password',
        anim: false
      };
    },
    mounted(){

    },
    watch: {},
    methods: {
      onPhoneInput(){
        this.phone = this.phone.replace(/\D/g, '');

        if (this.phone != '') {

        }
        this.phone != ''
        this.show_next = checkPhone(this.phone);
      },
      onPasswordInput(){
        this.show_next = this.password.length >= 6;
      },
      changePasswordType(){
        this.eye_type = this.eye_type == 'text' ? 'password' : 'text'
      },
      forgetPassword(){
        alert('还没做呢');
      },
      next(){
        this.show_next = false;//变成灰色
        if (this.status == 0) {//手机号
          //todo 转圈
          this.clickCheckPhone();
        } else {
          this.clickLogin();
        }
      },
      clickCheckPhone(){
        this.$store.dispatch('CheckUserRegiter', {phone: this.phone,}).then(() => {
          this.status++;
          this.anim = true;
        }).catch(() => {

        }).finally(() => {
          //todo 取消
        });
        // //校验
        // this.$store.dispatch('Login', {
        //    phone : this.phone,
        //    password : this.password,
        //    masterClient : 1}
        //    ).then(() => {
        // 	this.$router.push({ path: '/' });
        // }).catch(() => {
        // 	//this.loading = false
        // })
      },
      clickLogin(){
        this.$store.dispatch('Login', {phone: this.phone, password: this.password, masterClient: 1}).then(() => {
          //this.status ++;
          //this.anim = true;
          this.$router.replace('/');
        }).catch((e) => {
          alert('error' + e)
        }).finally(() => {
          //todo 取消
        });
      }
    }
  }

</script>
<style lang="scss">
  @import "../../assets/scss/variate";

  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-7.5rem);
    }
  }

  .header-bar-progress .progress-box.anim {
    width: 66% !important;
    transition: all 1s;
  }

  .login-content-box {
    .func-section-wrap {
      height: 5rem;
      width: 15rem;
      .func-section {
        float: left;
        margin: 0 .45rem;
        width: 6.6rem;
      }
      &.anim {
        animation: slide 1s;
        animation-fill-mode: both;
      }
    }

    .login-big-title {
      padding-top: 1.2rem;
      font-size: $font-size-60;
      font-weight: bold;
    }
    .login-md-title {
      padding-top: .65rem;
      font-size: $font-size-38;
      font-weight: bold;
    }
    .login-border-box {
      padding: 0 .1rem;
      border-bottom: 1px solid #ccc;
    }
    .mobile-text {
      line-height: .46rem;
      font-size: $font-size-34;
      color: #545454;
    }
    .login-vcode-box {
      margin-top: .74rem;
      height: .46rem;
      line-height: .46rem;
      .vcode-hidden, .ph-prompt {
        position: absolute;
        top: 0;
      }
      .vcode-hidden {
        left: -3000%;
      }
      .ph-prompt {
        left: 0;
        font-size: $font-size-28;
        color: #999;
      }
      li {
        float: left;
        margin-right: .33rem;
        width: .82rem;
        height: .46rem;
        text-align: center;
        font-size: .48rem;
        border-bottom: 1px solid #ccc;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .login-vcode-btn {
      width: 2.56rem;
      height: .46rem;
      font-size: $font-size-34;
    }
    .login-input-text {
      width: 5.86rem;
      height: .62rem;
      line-height: .62rem;
      font-size: .34rem;
      color: #545454;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      &.password-input {
        width: 5rem;
      }
      &.mobile-limit-width {
        width: 5.86rem;
      }
      &.password-limit-width {
        width: 4.8rem;
      }
    }
    .reset-btn {
      display: block;
      margin-top: .12rem;
      width: .38rem;
      height: .38rem;
    }
    .password-show {
      margin-top: .1rem;
      margin-left: .2rem;
      width: .5rem;
      height: .38rem;
    }
    .login-submit {
      width: 1.42rem;
      height: 1.43rem;
      background: url("../../assets/images/login-submit-yes.png") 0 0 / 1.42rem auto no-repeat;
      &.disabled, &[disabled] {
        background-image: url("../../assets/images/login-submit-no.png");
      }
    }
  }

  .login-success-bg {
    box-sizing: border-box;
    padding-top: 1.55rem;
    height: 3.73rem;
    background: url("../../assets/images/login-success-bg.png") center 0 / 100% auto no-repeat;
    .login-success-inset {
      margin: $mg-auto;
      width: 1.3rem;
      height: 1.3rem;
      background: url("../../assets/images/login-success-bg-inset.png") center 0 / 100% auto no-repeat;
    }
    .login-success-text {
      padding-top: .3rem;
      text-align: center;
      font-size: $font-size-38;
      font-weight: bold;
    }
  }
</style>
